<template>
  <div class="app-container">
    <span class="my_title">查询利用档案登记</span>
    <div style="margin-top:7vh;margin-left: 3vh">
      <el-form  @submit.native.prevent ref="form" :model="form" :rules="rules" label-width="80px">
        <div>
          <el-form-item label="姓名" prop="name" class="borrow_input">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="联系电话" prop="number" class="borrow1_input">
            <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="form.number" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item label="所在单位" prop="unit" style="margin-top: 1vh">
            <el-input v-model="form.unit" placeholder="请输入所在单位" />
          </el-form-item>
          <el-form-item label="查询时间" prop="time" class="borrow_input" style="margin-top: 1vh">
            <el-date-picker clearable
                            v-model="form.time"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择查询时间"
                            style="width: 23vh">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="人数" prop="people" style="margin-top: 1vh" class="borrow1_input">
            <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="form.people" placeholder="请输入查询人数" />
          </el-form-item>
        </div>
<!--        <div>-->
<!--          <el-form-item label="分类号" prop="classNumber" class="my_input">-->
<!--            <el-input v-model="form.classNumber" placeholder="请输入分类号" />-->
<!--          </el-form-item>-->
<!--          <el-form-item label="卷册" prop="volume" class="my_input">-->
<!--            <el-input v-model="form.volume" placeholder="请输入案卷卷册" />-->
<!--          </el-form-item>-->
<!--          <el-form-item label="编号" prop="serial" class="my_input">-->
<!--            <el-input  oninput="value=value.replace(/[^\d]/g,'')" v-model="form.serial" placeholder="请输入案卷编号" />-->
<!--          </el-form-item>-->
<!--        </div>-->
        <el-form-item label="档案内容" prop="archiveDetails" style="margin-top: 1vh">
          <el-input v-model="form.archiveDetails" placeholder="请输入档案内容" />
        </el-form-item>
        <el-form-item label="用途" prop="purpose" style="margin-top: 3vh">
          <el-select v-model="form.purpose" placeholder="请选择用途" style="width: 23vh">
            <el-option
              v-for="dict in dict.type.use_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>

<!--        <el-form-item label="详细用途" prop="detailPurpose">-->
<!--          <el-input v-model="form.detailPurpose" placeholder="请输入详细用途" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="备注" prop="ps">-->
<!--          <el-input v-model="form.ps" type="textarea" placeholder="请输入备注" />-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" style="margin-top: 4vh;">
        <el-button type="primary" @click="submitForm" class="my_button" >确 定</el-button>
        <el-button @click="cancel" class="my_button" style="margin-left: 3vh">重 置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { getRegister, addRegister, updateRegister } from "@/api/system/register";

  export default {
    name: "Register",
    dicts: ['use_type'],
    data() {
      return {
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          time: [
            { required: true, message: "查询时间不能为空", trigger: "blur" }
          ],
          name: [
            { required: true, message: "姓名不能为空", trigger: "blur" }
          ],
          unit: [
            { required: true, message: "所在单位不能为空", trigger: "blur" }
          ],
          purpose: [
            { required: true, message: "用途不能为空", trigger: "change" }
          ],
          people: [
            { required: true, message: "查询人数不能为空", trigger: "blur" }
          ],
          // detailPurpose: [
          //   { required: true, message: "详细用途不能为空", trigger: "blur" }
          // ],
          // classNumber: [
          //   { required: true, message: "分类号不能为空", trigger: "blur" }
          // ],
          // archiveDetails: [
          //   { required: true, message: "档案内容不能为空", trigger: "blur" }
          // ],
          // volume: [
          //   { required: true, message: "案卷卷册不能为空", trigger: "blur" }
          // ],
          // serial: [
          //   { required: true, message: "案卷编号不能为空", trigger: "blur" }
          // ],
          number: [
            { required: true, message: "联系电话不能为空", trigger: "blur" }
          ],
        }
      };
    },
    created() {

    },
    methods: {
      // 取消按钮
      cancel() {
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          time: null,
          name: null,
          unit: null,
          people:null,
          purpose: null,
          detailPurpose: null,
          classNumber: null,
          volume: null,
          serial: null,
          number: null,
          archiveDetails: null,
          ps: null
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateRegister(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.getList();
              });
            } else {
              addRegister(this.form).then(response => {
                this.$modal.msgSuccess("登记成功");
                this.reset();
              });
            }
          }
        });
      },
    }
  };
</script>

<style>
  .my_title{
    text-align: justify;
    font-size: 30px;
    margin-left: 43%;
    font-weight: bold;
    letter-spacing:7px;
  }
  .my_button{
    width: 120px;
    margin-left: 3vh
  }
  .borrow_input{
    width: 30vh;
    display: inline-block;
  }
  .borrow1_input{
    width: 30vh;
    margin-left: 15vh;
    display: inline-block;
  }

</style>
